<template>
    <!-- 准备一个容器用来存放音乐播放器 -->
    <div id="aplayer" ref="aplayer"></div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import 'aplayer/dist/APlayer.min.css';
import APlayer from 'aplayer';
export default {
    data() {
        return {
            // 播放器实例
            ap: '',
            // 歌曲列表
            audio: [],
        }
    },
    computed: {
        ...mapState('playListModule', ['playSongId', 'songInfo', 'playStatus', 'songDetails', 'lyric', 'audioInfo'])
    },
    watch: {
        audioInfo: {
            handler(n) {
                console.log('ap=====>', this.ap);
                this.audio.push(n)
                this.initAudio()
            }
        }
    },
    methods: {
        ...mapMutations('playListModule', ['SET_PLAY_DETAILS', 'SET_LYRIC']),
        initAudio() {
            this.ap = new APlayer({
                container: this.$refs.aplayer,
                lrcType: 1,
                audio: this.audio || [], // 音乐信息
                info: {
                    fixed: false, // 不开启吸底模式
                    listFolded: true, // 折叠歌曲列表
                    mutex: true,
                    // listMaxHeight: 50,
                    autoplay: false, // 开启自动播放
                    preload: "auto", // 自动预加载歌曲
                    // loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
                    order: "list", //  播放模式，list列表播放, random随机播放
                },
            });
        },

    },
    mounted() {
        // 初始化播放器
        this.initAudio();
    }
}
</script>

<style lang="scss" scoped>

</style>
